// px转换为rem
@function pxToRem($px, $base: 750px) {
    $min: 1 / $base * 10 * 1;
    $result: $px / $base * 10 * 1;

    @if $result < 0.027 and $result > 0 {
        @return 2px;
    }

    @else {
        @return $px / $base * 10 * 1rem;
    }

}

// 设置dpr下的字体大小
@mixin font-dpr($font-size, $line-height: $font-size) {
    font-size: $font-size / 2;

    @if $line-height != none {
        line-height: $line-height / 2;
    }

    [data-dpr="2"] & {
        font-size: $font-size;

        @if $line-height != none {
            line-height: $line-height;
        }
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3 / 2;

        @if $line-height != none {
            line-height: $line-height * 3 / 2;
        }
    }
}
@font-face {
    font-family: 'PingFang';
    src: url('../font/enroll/PingFang Regular.eot');
    src:
      url('../font/enroll/PingFang Regular.eot?#font-spider') format('embedded-opentype'),
      url('../font/enroll/PingFang Regular.ttf') format('truetype'),
      url('../font/enroll/PingFang Regular.woff') format('woff'),
      url('../font/enroll/PingFang Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{
    background: url(../images/uploadVideo/back.png) 0 0 repeat-x;
    background-size: contain;
    font-family: 'PingFangSC-Regular','PingFang';
}
.hidden{
    display: none;
}
.header{
    width: 100%;
    height: pxToRem(215px);
    padding-top: pxToRem(35px);
    position: relative;

    .time{
        width: 100%;
        height: pxToRem(215px);
        position: absolute;
        top: pxToRem(35px);
        left: 0px;
        
        .time-img{
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            display: block;
        }

        .time-word{
            position: absolute;
            top: pxToRem(10px);
            left: pxToRem(315px);
            color: #ea4684;
            font-weight: bold;
            @include font-dpr(38px);
        }
    }

    .rule{
        width: pxToRem(161px);
        position: absolute;
        top: pxToRem(35px);
        right: pxToRem(35px);

        .rule-link{
            display: block;
            width: 100%;
            height: 100%;
        }

        .rule-img{
            width: 100%;
            display: block;
        }
    }
}
.swiper-container {
    width: 100%;
    height: 402.5px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    background: url(../images/uploadVideo/video_box.png);
    background-size:100%; 
    width: 284px !important;
    position: relative;
    overflow: hidden;

    .title{
        @include font-dpr(38px);
        margin: 48px auto 0;
        font-weight: bold;
        font-family:'PingFangSC-Semibold','PingFang';
        color: #58595b;
    }
    img{
        display: block;
    }
    .illustration{
        width: 247.5px;
        height: 131.5px;
        margin: 10px auto 0;
    }
    .video_pic{
        width: 245.5px;
        height: 133px;
        margin: 16px auto 10px;
        border-radius: 8px;
    }
    .video_play{
        width: 43px;
        height: 42.5px;
        background: url(../images/uploadVideo/video_play.png);
        background-size: 100%;
        position: absolute;
        top:274px;
        left: 50%;
        margin-left: -21.5px;
        z-index: 999;
    }
    .poster-img{
        width: 245.5px;
        height: 133px;
        position: absolute;
        bottom: 44px;
        left: 19px;
        z-index: 998;
        border-radius: 8px;
    }

    .intro{
        @include font-dpr(26px);
    }
}
.select-themes{
    width: 100%;
    margin: 16px 0 -5px;
    img{
        display: block;
        width: 100%;
    }
}
.tips{
    width: 183px;
    height: 24.5px;
    background: url(../images/uploadVideo/tips.png);
    background-size: 100%;
    margin: 5px auto;
    transition: all 1s;
}
.group{
    width: 100%;
    text-align: center;
    @include font-dpr(26px);
    margin: 10px auto 7px;
}
.submit{
    width: 284px;
    margin: 5px auto 15px;
    img{
        display: block;
        width: 100%;
    }
}

.upload-box{
    width: 343.5px;
    height: 402.5px;
    margin: 0 auto;
    background: url(../images/uploadVideo/video_box2.png);
    background-size:100%; 
    overflow: hidden;
    position: relative;
    .upload-back-img{
        width: 309px;
        height: 165.5px;
        border-radius: 8px;
        position: absolute;
        top:61px;
        left: 50%;
        margin-left: -155.5px;
        z-index: 1;
    }
    .video-play{
        width: 43px;
        height: 42.5px;
        background: url(../images/uploadVideo/video_play.png);
        background-size: 100%;
        position: relative;
        z-index: 999;
        margin: 117px auto 0;
    }
    .poster-img{
        width: 309px;
        height: 165.5px;
        position: absolute;
        top: 59px;
        left: 15px;
        z-index: 998;
        border-radius: 8px;
    }
    .transcode-icon{
        width: 150px;
        height: 150px;
        background: url(../images/uploadVideo/transcode.png);
        background-size: 100%;
        position: relative;
        z-index: 2;
        margin: 65px auto 0;
    }
    .upload-back-mask{
        width: 309px;
        height: 0px;
        border-radius: 8px;
        position: absolute;
        left: 50%;
        bottom: 176px;
        margin-left: -155.5px;
        z-index: 1;
        background: rgba(255,255,255,0.8);
        transition: all 0.1s;
    }
    .upload-back-word{
        margin: 130px auto 0;
        text-align: center;
        position: relative;
        z-index: 3;
        @include font-dpr(32px);
    }
    .upload-btn{
        display: block;
        width: 75px;
        height: 75px;
        background: url(../images/uploadVideo/upload_btn.png);
        background-size:100%; 
        margin: 102px auto 0;
    }
    .progress{
        display: block;
        width: 200px;
        height: 75px;
        margin: 102px auto 0;
        text-align: center;
        color: #fff;
        @include font-dpr(122px);
        line-height: 75px;
    }
    .transcode-word{
        width: 300px;
        height: 75px;
        margin: 0 auto 55px;
        .transcoding{
            width: 120px;
            height: 120px;
            background: url(../images/uploadVideo/transcoding.gif);
            background-size:100%; 
            margin: 0 auto -40px;
        }
        p{
            @include font-dpr(30px,50px);
            color: #fff;
            text-align: center;
        }
    }
    .upload-end-word{
        display: block;
        width: 250px;
        height: 75px;
        margin: 92px auto 0;
        text-align: center;
        color: #fff;
        @include font-dpr(60px);
        span{
            @include font-dpr(30px,50px);
        }
    }
    .illus{
        margin: 20px;
        text-align: center;
        @include font-dpr(26px,42px);
    }
}
.confirm1{     
    margin: 15px auto 0;
    text-align: center;

    .confirm1-word{
        @include font-dpr(26px,40px);
        color: #333333;
    }
}

.upload-compelete{
    width: 343.5px;
    margin: 10px auto 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    .resubmit,.commit{
        width: 160px;
        height: 55px;
        margin: 0;
    }
    .resubmit{
        background: url(../images/uploadVideo/resubmit.png);
        background-size: 100%;
    }
    .commit{
        background: url(../images/uploadVideo/commit.png);
        background-size: 100%;
    }
}

@media (device-width:320px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/5 */
    .upload-box{
        width: 300px;
        height: 351.5px;
        margin: 0 auto;
        background: url(../images/uploadVideo/video_box2.png);
        background-size:100%; 
        overflow: hidden;
        position: relative;
        .upload-back-img{
            width: 268.5px;
            height: 165.5px;
            border-radius: 8px;
            position: absolute;
            top:42px;
            left: 50%;
            margin-left: -135px;
            z-index: 1;
        }
        .video-play{
            width: 43px;
            height: 42.5px;
            background: url(../images/uploadVideo/video_play.png);
            background-size: 100%;
            position: relative;
            z-index: 999;
            margin: 100px auto 0;
        }
        .poster-img{
            width: 268.5px;
            height: 145.5px;
            position: absolute;
            top: 52px;
            left: 15px;
            z-index: 998;
            border-radius: 8px;
        }
        .transcode-icon{
            width: 120px;
            height: 120px;
            background: url(../images/uploadVideo/transcode.png);
            background-size: 100%;
            position: relative;
            z-index: 2;
            margin: 55px auto 0;
        }
        .upload-back-mask{
            width: 268.5px;
            height: 0px;
            max-height: 142px;
            border-radius: 8px;
            position: absolute;
            left: 50%;
            bottom: 155px;
            margin-left: -135px;
            z-index: 1;
            background: rgba(255,255,255,0.8);
            transition: all 0.1s;
        }
        .upload-back-word{
            margin: 110px auto 0;
            text-align: center;
            position: relative;
            z-index: 3;
            @include font-dpr(32px);
        }
        .upload-btn{
            display: block;
            width: 60px;
            height: 60px;
            background: url(../images/uploadVideo/upload_btn.png);
            background-size:100%; 
            margin: 90px auto 0;
        }
        .progress{
            display: block;
            width: 200px;
            height: 75px;
            margin: 96px auto 0;
            text-align: center;
            color: #fff;
            @include font-dpr(122px);
            line-height: 75px;
        }
        .transcode-word{
            width: 300px;
            height: 75px;
            margin: 0 auto 50px;
            .transcoding{
                width: 120px;
                height: 120px;
                background: url(../images/uploadVideo/transcoding.gif);
                background-size:100%; 
                margin: 0 auto -45px;
            }
        }
        .upload-end-word{
            display: block;
            width: 250px;
            height: 75px;
            margin: 75px auto 0;
            text-align: center;
            color: #fff;
            @include font-dpr(60px);
            span{
                @include font-dpr(30px,50px);
            }
        }
        .illus{
            margin: 10px;
            text-align: center;
            @include font-dpr(26px,42px);
        }
    }
    .confirm1{     
        margin: 15px auto 0;
        text-align: center;
    
        .confirm1-word{
            @include font-dpr(26px,40px);
            color: #333333;
        }
    }
    
    .upload-compelete{
        width: 300px;
        margin: 10px auto 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        .resubmit,.commit{
            width: 140px;
            height: 48px;
            margin: 0;
        }
        .resubmit{
            background: url(../images/uploadVideo/resubmit.png);
            background-size: 100%;
        }
        .commit{
            background: url(../images/uploadVideo/commit.png);
            background-size: 100%;
        }
    }
}

.mask{
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top:0;
    left: 0;
    // display: flex;
    // justify-content:center;
    // align-items:center;
    .submit-error,.submit-out,.transcode-error{
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .submit-error{
        width: 303.5px;
        height: 202.5px;
        background: url(../images/uploadVideo/submit_error.png);
        background-size: 100%;
    }
    .submit-out,.transcode-error{
        width: 303.5px;
        height: 152.5px;
        background: url(../images/uploadVideo/submit_out.png);
        background-size: 100%;
    }
    .transcode-error{
        background: url(../images/uploadVideo/transcode_error.png);
        background-size: 100%;
        overflow: hidden;
        text-align: center;
    
        h3{
            margin: 37px auto 0;
            @include font-dpr(42px,43px);
            color: #1acbfd;
        }
        p{
            margin: 26px 15px;
            @include font-dpr(32px,42px);
            color: #1acbfd;
        }
    }
    .cancel{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 15px;
        right: 15px;
    }
}